<template>
    <div class="leftLick">
        <div class="top">
            <img class="gdImg" src="../../public/homeImg/cat.jpg" alt="">
            <ul class="rightBox">
                <li class="title">
                    <span>歌单</span>
                    <span class="titleBig">我喜欢的音乐</span>
                </li>
                <li class="title2">
                    <img src="../../public/homeImg/cat.jpg" alt="">
                    <span class="samllTitle">周棋洛</span>
                    <span class="samllTitle2">2017-12-01创建</span>
                </li>
                <li class="title3">
                    <p class="btn-h red">
                        <span class="iconfont">&#xe60f;</span>
                        <span>播放全部</span>
                        <span class="iconfont">&#xe727;</span>
                    </p>
                    <p class="btn-h ">
                        <span class="iconfont unActive">&#xe632;</span>
                        <span class="unActive">收藏(0)</span>
                    </p>
                    <p class="btn-h">
                        <span class="iconfont">&#xe706;</span>
                        <span>分享(0)</span>
                    </p>
                    <p class="btn-h">
                        <span class="iconfont">&#xe855;</span>
                        <span>下载全部(0)</span>
                    </p>
                </li>
                <li class="title4">
                    <span>歌曲：415</span>
                    <span>播放：415</span>
                </li>
            </ul>

        </div>
        <h1 class="titleBig" style="margin-top:10px">
            歌曲列表
        </h1>
        <slotList :data='songList' v-if="songList&&static"></slotList>
        <div style="height:100px"></div>
    </div>
</template>
<script>
import slotList from './slotList.vue'
import api from '../utils/api'
import Service from '../utils/Service'

export default {
    name:'leftLick',
    data() {
        return {
          static :false,
          songList:[]
        }
    },
    components:{
        slotList
    },
    mounted(){
        this.getSongArrId();
        
    },
    created() {
        // this.$store.getters.updataLoginData
        // console.log(this.$store.getters.updataLoginData.data.account.id)
    },
    methods:{
           async getSongArrId(){
          
      var userid = this.$store.getters.updataLoginData.data.account.id
      let res = await Service(api.likelist,{uid:userid});
      if(res.status == 200&&res.data.code==200){
         let getData= [...res.data.ids]
         let arrString = getData.join()
        let songLists = await Service(api.songDetail,{ids:arrString});
        let songUrl = await Service(api.songUrl,{id:arrString});
        // console.log('songUrl' );
        // console.log(songUrl );
     this.songList = songLists.data.songs.map(function(item,index){
      return {
                   // 歌曲标题
                name:item.name,
                singer:item.ar[0].name,
                id:item.id,
                picUrl:item.al.picUrl,
                // 歌曲类型
                t:item.t,
                // 歌手列表
                ar:item.ar,
                // 别名列表，第一个别名会被显示作副标题
                alia:item.alia,
                // u64, 歌曲时长
                dt:item.dt,
                // 非零表示有MV ID
                mv:item.mv,
                //  Album, 专辑，如果是DJ节目(dj_type != 0)或者无专辑信息(single == 1)，则专辑id为0
                al:item.al,
                // sq: Option<Quality>, 无损质量文件信息
                // h: Option<Quality>, 高质量文件信息
                // m: Option<Quality>, 中质量文件信息
                // l: Option<Quality>, 低质量文件信息
                // a: Option<?>, 常为None, 功能未知
                h:(()=>{if (item.hasOwnProperty('h')) {
                    return item.h
                }else{return null}})(),
                m:(()=>{if (item.hasOwnProperty('m')) {
                    return item.m
                }else{return null}})(),
                l:(()=>{if (item.hasOwnProperty('l')) {
                    return item.l
                }else{return null}})(),
                a:(()=>{if (item.hasOwnProperty('a')) {
                    return item.a
                }else{return null}})(),
                sq:(()=>{if (item.hasOwnProperty('sq')) {
                    return item.sq
                }else{return null}})(),
                songUrl:(()=>{
                    if (songUrl) {
                        console.log(songUrl.data.data);
                        return songUrl.data.data[index].url
                    } else {
                        return ''
                    }
                })(),

      }
    })
    this.static  =true
        // for (const iterator of songLists.data.songs) {
        //     this.songList.push({
        //         // 歌曲标题
        //         name:iterator.name,
        //         id:iterator.id,
        //         picUrl:iterator.picUrl,
        //         // 歌曲类型
        //         t:iterator.t,
        //         // 歌手列表
        //         ar:iterator.ar,
        //         // 别名列表，第一个别名会被显示作副标题
        //         alia:iterator.alia,
        //         // u64, 歌曲时长
        //         dt:iterator.dt,
        //         // 非零表示有MV ID
        //         mv:iterator.mv,
        //         //  Album, 专辑，如果是DJ节目(dj_type != 0)或者无专辑信息(single == 1)，则专辑id为0
        //         al:iterator.al,
        //         // sq: Option<Quality>, 无损质量文件信息
        //         // h: Option<Quality>, 高质量文件信息
        //         // m: Option<Quality>, 中质量文件信息
        //         // l: Option<Quality>, 低质量文件信息
        //         // a: Option<?>, 常为None, 功能未知
        //         h:(()=>{if (iterator.hasOwnProperty('h')) {
        //             return iterator.h
        //         }else{return null}})(),
        //         m:(()=>{if (iterator.hasOwnProperty('m')) {
        //             return iterator.m
        //         }else{return null}})(),
        //         l:(()=>{if (iterator.hasOwnProperty('l')) {
        //             return iterator.l
        //         }else{return null}})(),
        //         a:(()=>{if (iterator.hasOwnProperty('a')) {
        //             return iterator.a
        //         }else{return null}})(),
        //         sq:(()=>{if (iterator.hasOwnProperty('sq')) {
        //             return iterator.sq
        //         }else{return null}})(),
        //         // songUrl:(()=>{
        //         //     for (const iterator2 of songUrl.data) {}
        //         // })(),

        //     })
        // }
console.log(this.songList)
     
      }else{
        console.log(res)
      }
    },
        showZf(){
            this.ishowZf = true
        },
        //接收转发子组件传过来的内容
        ishowZfF(value){
            this.ishowZf = value
        },
        showPl(){

            this.isShowPl = true
           
        }
    }
}
</script>
<style lang="less" scoped>
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon2/iconfont.ttf?t=1658068442606') format('truetype');
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/iconfont.ttf?t=1658501073558') format('truetype');
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon4/iconfont.ttf?t=1659187482449') format('truetype');
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon3/iconfont.ttf?t=1658501961955') format('truetype');
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon5/iconfont.ttf?t=1663388423335') format('truetype');
}


    div,span,ul,li,img{
    font-size: 0;
}
.top::after{
     content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
}
.top{  
    .gdImg{
        width: 230px;
        border-radius: 5px;
        float: left;
    }
    .rightBox{
        
        float: left;
        margin-left: 20px;
        .title{
            span:first-child{
                font-size: 17px !important;
                 margin-left: 4px;
          display: inline-block;
          border: solid 1px #EC4141;
          padding: 0 2px;
          color: #EC4141 !important;
        //   line-height: 14px;
          font-weight: 400;
          border-radius: 3px;
          cursor: pointer;
            }
            span:last-child{
                font-size: 26px;
                font-weight: 800;
                margin-left: 20px;
            }
        }
        .title2{
            
            margin-top: 15px;
            display: flex;
            align-items: center;
            img{
                width: 32px;
                border-radius: 52%;
            }
            span{
                margin-left: 12px;
            }
            .samllTitle{
                font-size: 14px;
                color: #507DAF;
            }
            .samllTitle2{
                font-size: 14px;
                color: #676767;
            }
        }
        .title3{
             margin-top: 15px;
            display: flex;
            align-items: center;
            .btn-h{
            padding: 6px 10px;
            margin-right: 15px;
            border-radius: 17px;
            margin-left: 4px;
            border: solid 1px #D9D9D9;
            display: inline-block;
        }
        .red{
            background: #EC4141 !important;
            span{
                color: white !important;
            }
           }
        P{
           span{
             font-size: 19PX;
             margin: 0 5px;
             color: #373737;
           }
           .unActive{
            color: #B7B7B7;
           }
           
        }
        }
        .title4{
             margin-top: 15px;
            display: flex;
            align-items: center;
            span{
             font-size: 16PX;
             margin: 0 5px;
             color: #373737;
           }
        }
    }
}
 
</style>